如果您经常使用HubSpot CMS,您可能已经获得了一些HTML (超文本标记语言)的技能。

HTML是在web上显示文档的标准编程语言。学习HTML的基础知识可以让你作为数字营销人员的工作变得更容易,因为你会觉得有能力这样做更新公司网站raybet电子竞技在你自己的。

因此,你不需要等待来推进依赖于市场的营销活动。

用HubSpot的WordPress网站工具来发展你的业务

下面,我们将介绍一些基本的HTML代码,这些代码将允许您正确地在您的网站上呈现信息,并按预期传达您的信息。

一旦理解了为什么某些HTML代码是这样输入的上下文,就会更容易回忆和使用它们。

HTML文本代码

在发布网页时,您希望文本保持预期的相同格式,包括粗体、斜体和下划线。

HTML代码可以使你的网站上的文本样式与你在非网站文字处理程序上的样式相同。您只需要了解一点语言就可以根据您的规范自定义文本。

  • 大胆的文本,使用:< em >文本< / em >
  • 斜体文本,使用:<我>文本< / i >
  • 对于带下划线的文本,使用:文本< / u >

文本格式化的大多数其他方面都涉及到CSS的使用。

要创建HTML链接代码,请使用<一>(“锚”)标记。

这个HTML链接代码的一个示例涉及如下内容:

< a href = "website.com“>链接文本< / >

href属性指定单击链接后将结束的特定目的地。用户看到的文本,作为一个更用户友好的替代列出完整的网站地址,应该输入在第一个标签和结束标签之间(在这个例子中的链接文本)。

除了定义一个链接应该带用户到哪里之外,您还可以指定该链接应该在相同的浏览器选项卡中打开,还是应该在新的浏览器选项卡中打开。当谈到将流量导向外部链接的公认最佳实践时,这一区别非常重要——外部链接的理想目标是一个新的浏览器选项卡。

HTML链接代码的目标是在新的浏览器选项卡中打开链接,看起来像这样:

< a href = " website.com "目标= "平等"< / > >链接文本

在讨论这个话题的同时,让我们来讨论两个可以添加到链接中以触发其他应用程序的前缀:

1) Mailto:启动用户的主要电子邮件应用程序,打开一个新的电子邮件草稿到指定的电子邮件地址,例如: email@address.com" > email@address.com < / >

2) Tel:在链接中提示您的设备按此前缀拨打号码,例如<img src= " imageURL.png " alt= " image description " /> .png

在输入图像或链接代码时要小心——指向文件的链接是大小写敏感的。

HTML颜色代码

作为HTML元素的一部分,在CSS的帮助下执行,您可以使用其预定义的名称指定颜色(如“红色”、“橙色”、“灰色”)或应用它的RGB、HEX或HSL。

以下是每种颜色系统的简要说明以及它的作用。

RGB

RGB值根据红色、绿色和蓝色部分定义颜色。使用的公式为:rgb(红、绿、蓝)。参数表示当前每种颜色的强度,范围从0到255。

RGBA是RGB值的一个扩展,带有alpha通道来指定不透明度。因此公式是:rgb(红色,绿色,蓝色,alpha)。alpha值是一个介于0.0和1.0之间的数字。当它是0。0时,颜色是完全透明的;在1.0,它是完全不透明的。

十六进制

十六进制值(十六进制值)用于以#rrggbb的形式指定颜色,其中红色、绿色和蓝色由00到ff之间的十六进制值表示。

奥软

HSL值是指颜色的色相、饱和度和明度。所用公式为:hsl(色相,饱和度,亮度)。色调由0到360之间的值表示——红色为0,绿色为120,蓝色为240。饱和度和亮度都是百分比值。零饱和度显示一个灰色阴影,而100%显示全色。零亮度显示黑色,而100%的亮度显示白色。

HSLA是HSL值的扩展,包括一个alpha通道来定义不透明度(类似于RGBA)。

方法 公式 例子(红色)
颜色名称 N/A 红色的
RGB rgb(红、绿、蓝) rgb (255, 0, 0)
十六进制 # rrggbb # ff0000
奥软 奥软(色相、饱和度、明度) 奥软(0100%,50%)

大多数开发人员选择特定的格式或格式组合并坚持使用它。您也应该这样做,以避免混淆,并在编码时更容易区分颜色。

HTML空间代码可以用特殊字符来实现。对于一个薄的空间,使用 或& # 8201;。对于一个在空间,使用 或& # 8194;。对于一个新兴市场空间,使用&empsp;或& # 8195。

在没有正确格式化这些特殊字符的情况下,HTML将所有空格字符(如制表符和空格)压缩为一个字符。如果没有HTML SPACE标记,知道如何使用HTML Space代码会让您对HTML间距的控制。

当需要在文本中添加空格时,可以使用适当的空格特殊字符, CSS或< >之前在HTML标签。描述实体时,可以使用实体名称或实体编号。

不换行空格字符是最常用的。使用此方法创建的空间确保两侧的两个单词保持在同一行中,即使文本换行。

这个例子可以帮助你理解如何使用特殊字符来添加HTML空格代码:

  • 没有空间
  •  或& # 8201;
  •  或& # 8194;
  • &empsp;或& # 8195;

HTML空间代码示例

属性还可以发布预格式化内容< >之前在HTML标签。这样,内容保留了外部文字处理工具上的格式。这意味着当您输入内容时,内容将在浏览器中显示。

HTML空间代码示例源代码

最佳HTML代码生成器

最好的HTML代码生成器不是从头开始编写所有的HTML代码,而是通过为您想要的任何代码提供基本的结构,从而帮助您更快地编写代码,并且花费更少的精力。

学习所有你需要知道的关于HTML与我们的免费指南:初学者的指南HTML和CSS为营销人员

以下是一些可供设计人员使用的最好的HTML代码生成器,您也可以使用它们来简化编码工作。

1.HTML5样板

HTML5样板是一个受欢迎的选择。这是一个简单、圆滑的模板,包含了用HTML构建网站的所有要素,对于刚刚开始探索HTML的营销人员来说,这是一个很好的起点。

它的突出特性之一是优化的谷歌Analytics代码片段和优化后的index.html文件,以提高移动适应性。集成Normalize.css帮助处理任何潜在的浏览器样式不一致。

这段视频可以帮助你理解如何使用HTML5样板。

2.引导

引导是另一个流行的HTML代码生成器。HTML5 Boilerplate是一个前端模板,后者是一个前端组件库。有趣的是,他们都声称自己是“世界上最受欢迎的”头衔。

Bootstrap提供的不仅仅是一个具有布局、排版、内容、UI组件和工具提示等功能的模板。它不仅功能丰富——您可以将下载的文件限制为只包含您认为对项目有用的元素。

3.HTML5模板生成器

顾名思义,HTML5模板生成器被设计人员用来生成HTML5模板。由法国开发者Shikiryu开发,生成器带有各种常见的网站元素的一系列功能。

使用HTML5 Template Generator,你可以在几秒钟内轻松地构建你的基本HTML代码。从长远来看,嵌入网站名称、元描述、作者详细信息和图标的选项可以节省你的时间。JavaScript用户也可以使用此工具添加jQuery和谷歌Analytics到他们的网站。

最佳HTML代码测试员

HTML代码测试人员或编辑器帮助以各种方式编写代码,例如样式标记、高亮显示和颜色编码。当你使用编辑器时,你可以预期你的打字速度会提高,帮助你在完成网页设计任务时更有效率。

这些编辑器允许你在不需要高级HTML技能的情况下优化你的网页。

所有这些代码中都有“所见即所得”(What You See Is What You Get, WYSIWYG)特性,可以让你准确地预览编码结果发布时的样子。实时结果,以及拖放功能,使您的代码编辑快速和容易。

基于web的HTML代码测试人员提供了跳过环境安装和设置的便利。下面是一些最好的代码测试人员/编辑器。

Codepen

Codepen是前端web开发中最流行的代码测试员之一。它为使用HTML、CSS和JavaScript的开发人员提供了一种方便地测试、编辑和展示代码的方法。

除了代码编辑/测试,Codepen是一个学习环境,也是一个社区。您可以使用它来提高您的基本编码技能,通过与平台上与您相同或更高层次的其他人进行交互。

Adobe Dreamweaver

顾名思义,Adobe Dreamweaver是Adobe产品。这是一个流行的WYSIWYG代码编辑器,可以帮助你设计、发布和管理你的网站,而不需要什么技术技能。虽然它的许多功能可能会让初学者感到难以承受,但Adobe通过深入的开发使入职过程尽可能地轻松教程

通过定期更新功能和用户界面,Dreamweaver是一个成熟的管理软件,任何有设计眼光的开发者、设计师或营销人员都应该考虑。雷竞技苹果下载官方版

JSFiddle

JSFiddle是网页设计师和开发人员最古老的代码游乐场之一。尽管它的名字,JSFiddle并不局限于JavaScript代码编辑。它还可以用于测试HTML和CSS代码(或这三种编码语言的任何组合)。

JSFiddle允许任何人公开分享他们的代码,许多代码专家都这样做。但是您不仅可以测试自己的代码,还可以浏览平台上其他程序员的工作代码示例。只要记住,在使用原始作者的代码时要给予适当的赞扬!

还有许多其他工具可以帮助您测试代码。前选择包括:

这些工具大多提供免费增值计划。

如果你在这个列表之外评估选项,确保它们满足以下所有HTML代码测试人员的基本特性:

  • 自动完成,自动填充HTML元素和属性,节省您的按键
  • 内置文件传输协议(FTP),帮助更快地传输文件
  • HTML实体库
  • 分割屏幕,便于查看代码
  • 搜索功能,让您从网站上的任何文件找到任何词
  • 语法错误高亮显示,让您轻松发现错误

基本的HTML知识,每一个互联网营销者应该有

如果你学习了基本的HTML技能,可以让你在动态中处理网站的变化,你可以为你的公司节省生产力,当员工需要通过其他人来完成工作时。raybet电子竞技

让HTML成为你在2020年添加到你的个人营销堆栈中的技术技能。编码快乐!

在你的WordPress网站上使用HubSpot工具,在不处理代码的情况下连接两个平台。点击这里了解更多。

在你的WordPress网站上使用HubSpot工具,在不处理代码的情况下连接两个平台。点击这里了解更多。

最初发布于2010年2月18日下午2:30:00,更新于2020年3月31日

主题:

网站开发